<template>
	<view class="container">
		<!-- <swiper class="swiper"
		        :style="{width:banner_w}" 
		        :indicator-dots="true" :autoplay="true" :interval="5000" :duration="2000">
			<swiper-item>
				
			</swiper-item>
		</swiper> -->
		<image class="coupon_imgurl" mode="widthFix" :src="url+result[0].coupon_imgurl"></image>
		<view class="merchant_unit">
			<view class="merchant_con">
				<view class="merchant_name">{{result[0].coupon_name}}</view>
				<view class="address"><image :src="static+'/merchant.png'"></image>{{result[0].shop_name}}</view>
				<view class="address">使用时间:{{result[0].begin_time}}~{{result[0].end_time}}</view>
			</view>
			<view class="merchant_tag">已兑换{{result[0].get_sum}}</view>
		</view>
		<view class="coupon_desc">
			<view class="desc_title">使用说明</view>
			<view class="content">{{result[0].desc}}</view>
		</view>
		<view class="foot">
			<view class="integral">所需积分<text>{{result[0].exchange_price}}</text></view>
			<view class="operate">
				<!-- #ifdef MP-WEIXIN -->
				<button class="service" open-type="contact">
					<image src="../../static/images/service.png"></image>
					<view class="service_name">客服</view>
				</button>
				<!--#endif -->
				<view class="button" :id="id" v-on:click="exchange">立即兑换</view>
			</view>
		</view>
	</view>
</template>
<style>
	/******************/
	.foot{width:92%;padding:0 4%;display: flex;justify-content: space-between;align-items: center;background: #FFFFFF;
	height: 90upx;position: fixed;bottom: 0;left:0;}
	.integral{font-size: 32upx;color: #333333;font-weight: bold;}
	.integral text{font-size: 36upx;padding-left:20upx;color: #E03636;font-weight: bold;}
	.operate{display: flex;justify-content: space-between;align-items: center;}
	.service{margin-right: 20upx; height: 90upx;display: flex;flex-direction: column;justify-content: center;align-items: center;background: #FFFFFF;}
	.service image{width:40upx;height: 40upx;}
	.service:after{border:0;padding:0;}
	.service_name{font-size: 28upx;line-height: 30upx;}
	.button{background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 35upx;font-size: 28upx;height: 70upx;line-height: 70upx;padding:0 40upx;color: #FFFFFF;}
	/******************/
	.merchant{width:94%;padding:20upx 3%;background: #FFFFFF;}
	.merchant_unit{width:92%;display: flex;justify-content: space-between;align-items: flex-end;padding:10upx 4%;background: #FFFFFF;}
	.merchant_con{width:70%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
	.merchant_name{font-size: 36upx;color: #333333;font-weight: bold;line-height: 60upx;}
	.address{font-size: 28upx;color: #999999;display: flex;justify-content: flex-start;align-items: center;line-height: 40upx;}
	.address image{width:30upx;height: 30upx;margin-right: 20upx;}
	.merchant_tag{color: #666666;padding:0 10upx;border-radius: 10upx;font-size: 24upx;text-align: right;line-height: 40upx;}
	.coupon_desc{width:92%;padding:20upx 3%;background: #FFFFFF;margin-top: 20upx;}
	.desc_title{border-left: 3px solid #3DE9C7;line-height: 50upx;padding-left:3%;font-size: 32upx;color: #333333;font-weight: bold;}
	.content{width:90%;margin:20upx 5%;font-size: 24upx;line-height: 50upx;}
	/******************/
	.swiper{padding: 0 3%;width:94%;border-radius: 20upx;background: #FFFFFF;overflow: hidden;}
	.top_fixed{height: 80upx;margin:0 3% 20upx 3%;width:94%;position: fixed;top:0;left:0;z-index: 999;}
	.sort{height: 80upx;margin:0 3% 20upx 3%;width:94%;}
	.nav{height: 80upx;background-color:#717171; display: flex;align-items: center;justify-content: flex-start;flex-wrap: nowrap;}
	.coupon_imgurl{width: 94%;margin:0 3%;border-radius: 40upx;}
	/******************/
	page,.container{background: #f4f4f4;}
</style>
<script>
	export default {
		data() {
			return {
				id:0,
				name:'',
				pic_h:'',
				merchant_pic:'',
				banner_w:'',
				banner_h:'',
				result:[],
				height:'',
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.banner_w = w+"px";
			this.banner_h = w*0.94*9/16+"px";
			this.banner_h = "auto";
			this.merchant_pic = w*0.94*0.94*0.2+"px";
			this.height = res.windowHeight+"px";
			this.id = parseInt(e.id);
			// const scene = decodeURIComponent(e.scene);
			// var upid    = uni.getStorageSync("upid");
			// if(scene=="undefined"||scene==undefined)
			// {
			// 	if(upid=="" || upid==undefined || upid=="undefined")
			// 	{
			// 		if(e.upid==undefined)
			// 		{
			// 			uni.setStorageSync("upid",0);
			// 		}
			// 		else
			// 		{
			// 			uni.setStorageSync("upid",parseInt(e.upid));
			// 		}
			// 	}
			// }
			// else
			// {
			// 	uni.setStorageSync("upid",scene);
			// }
		},
		onShow(){
			this.initialize();
		},
		onReachBottom:function()
		{
			// this.get_goods_list();
		},
		methods: {
			exchange:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.showModal({
					title:"确认兑换",
					content:"点击确认兑换，兑换成功！",
					success: (r) => {
						if(r.confirm)
						{
							uni.request({
								url: that.url+"/wechat_exchange_coupon",
								data: {coupon_id:that.id,member_id:member_id},
								header: {'Content-Type': 'application/json'},
								success: function (res) 
								{
									console.log(res);
									if(res.data.status==1)
									{
										uni.showToast({
											title:"兑换成功",
											duration:1000,
											success() {
												uni.navigateTo({
													url:"../member/coupon"
												})
											}
										})
									}
									else
									{
										uni.showModal({
											title:"兑换提示",
											content:res.data.err_msg,
											showCancel:false,
											success: (res) => {
												if(res.confirm)
												{
													
												}
											}
										})
									}
								}
							})
						}
					}
				})
				
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+"/wechat_coupon_detail",
					data: {coupon_id:this.id},
					header: {'Content-Type': 'application/json'},
					success: function (res) 
					{
						console.log(res.data);
						that.result = res.data.result;
					}
				})
			}
		}
	}
</script>